<template>
<el-container style="height: 100%; border: 1px solid #eee">
<el-aside :width="sideWidth +'px'" style="background-color: rgb(238, 241, 246); height: 100% ;box-shadow: 2px 0 6px rgb(0 21 36)" >
  <el-menu :default-openeds="['1', '3']" style="height: 100%;overflow-x: hidden;" background-color="#695F69" text-color="#F5FFF7"
  :collapse-transition="false"
   :collapse="isCollapse"
   router
  >
    <div style="height: 60px;line-height: 60px;text-align: center">
      <img src= "@/assets/img/1.jpg" alt="不见了" style="width: 20px">
      <b style="color: #eeeeee" v-show="!isCollapse">奖学金管理系统后台</b>
    </div>
    <el-submenu index="1" >
      <template slot="title"><i class="el-icon-message"></i>
        <span slot="title">用户管理</span>
      </template>
      <el-menu-item-group>

        <el-menu-item index="/admin/home/tuser"><i class="el-icon-user-solid"></i>辅导员管理</el-menu-item>
        <el-menu-item index="/admin/home/suser"><i class="el-icon-user-solid"></i>学生管理</el-menu-item>
      </el-menu-item-group>
    </el-submenu>
        <el-menu-item index="/admin/home/xize"><i class="el-icon-coordinate"></i>评定细则查询</el-menu-item>
    <el-submenu index="3">
      <template slot="title"><i class="el-icon-setting"></i>
        <span slot="title">成绩/申请</span>
      </template>
      <el-menu-item-group>

        <el-menu-item index="/admin/home/jfsq">加分申请修改</el-menu-item>
        <el-menu-item index="/admin/home/jxjsq">奖学金申请修改</el-menu-item>
        <el-menu-item index="/admin/home/score">学生成绩管理</el-menu-item>
        
      </el-menu-item-group>

    </el-submenu>
  </el-menu>
</el-aside>

<el-container>

  <el-header style="text-align: right; font-size: 12px;display: flex ">
    <div style="flex: 0 0 auto; font-size: 20px;"> <!-- flex: 0 0 auto; 确保这个元素不会伸缩 -->
      <span :class="collapseBtnClass" style="cursor: pointer" @click="collapse"></span>
    </div>
    <!-- 剩余的元素 -->
    <el-dropdown style="margin-left: auto; width: 200px;" @command="handleCommand"> <!-- margin-left: auto; 将这个元素推到右边 -->
      <i class="el-icon-setting" style="margin-right: 15px"></i>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item command="a">退出</el-dropdown-item>

      </el-dropdown-menu>
    </el-dropdown>
    <span>admin</span>
  </el-header>

  <el-main>
    <!-- 当前页面子路由 -->
    <router-view />
     
  </el-main>
 
  </el-container>
</el-container>
</template>


<script>

import { RouterView } from "vue-router";
import request from "../utils/request";
export default {
  
  created(){
    request.get("/suser").then(res =>{
      if(res.data.code === 401){
        this.$message.error({
              
              message: res.data.msg,
              
             })
        this.$router.push("/admin/login")
      }
    })
  },
  data() {
   
    return {
      
      collapseBtnClass: 'el-icon-s-fold',   //样式设置
      isCollapse: false,   // 是否收缩
      sideWidth: 200 ,      //格式设置
      
    }
  },
  
  methods:{
    collapse(){
    this.isCollapse = !this.isCollapse
      if(this.isCollapse){
        this.sideWidth = 64
        this.collapseBtnClass='el-icon-s-unfold'
      }else{
        this.sideWidth=200
        this.collapseBtnClass='el-icon-s-fold'
      }
    },
    handleCommand(command) {
        localStorage.removeItem("token")
        this.$router.push("/admin/login")
      }
  }
};
</script>
<style>
.el-header {
  background-color: #FCFCFC;
  color: #333;
  line-height: 60px;
}

.el-aside {
  color: #333;
}

</style>